<template>
  <div>
    <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" router>
      <el-menu-item index="/usercenter/">商品列表</el-menu-item>
      <el-menu-item index="/usercenter/cartList"> 购物车</el-menu-item>
      <el-menu-item index="/usercenter/userOrder">订单中心</el-menu-item>
      <el-menu-item index="/userMsg">我的信息</el-menu-item>
    </el-menu>
    <div class="userOut">
      <span>{{userName}}</span>
      <a href="javascript:0"><i class="el-icon-share" @click="userLoginOut">退出</i></a>
    </div>
  </div>

</template>

<script>
    export default {
        name: "NavHeader",
        data(){
          return {
            activeIndex: '#/usercenter/',
            userName:"",
          }
        },
        mounted(){
          this.$http.post("api/users/checkUsre").then(res=>{
            if(res.data.code === 200){
              this.userName=res.data.result;
            }else{
              this.$message.error('账号未登录');
              this.$router.push("/");
            }
          })
        },
      methods:{
        userLoginOut(){
          this.$http.post("api/users/userLoginOut").then(res=>{
            if(res.data.code === 200){
              this.$router.push("/");
            }
          })
        }
      }

    }
</script>

<style >
  .users{
    float:right;
  }
  .el-menu--horizontal{
    padding-left:100px;
  }
  .userOut{
    position:absolute;
    top:0;
    right:100px;
    font-size:18px;
    line-height:50px;
  }
</style>
